<template>
    <div class="sidebar">
        <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 908px;">
            <!--                {{memuList}}-->
            <el-menu
                    :default-active="activeMenu"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    :collapse="isCollapse"
            >
                <div :style="{ width: !isCollapse ? '200px' : 'auto' }" v-for="parent in memuList" :key="parent.menuName">
                    <div v-if="parent.hidden ===0"></div>
                    <div v-else>
                        <leftSubMenu :parent="parent"></leftSubMenu>
                    </div>
                </div>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>

    import leftSubMenu from './leftSubMenu'
    export default {
        props: ['memuListVal'],
        components: {
            leftSubMenu,
        },
        data() {
            return {
                isCollapse: false,
                memuList: null,
                memuList2: null,
                memuListValDefault: 1,
            }
        },
        computed: {

            activeMenu() {
                const route = this.$route;
                // console.log(path)
                // console.log(route)
                // const {meta, path} = route;
                // // if set path, the sidebar will highlight the path you set
                // if (meta.activeMenu) {
                //     return meta.activeMenu;
                // }

                console.log(route.path)
                return route.path
            },
        },
        watch: {
            memuListVal: {
                handler(newVal) {
                    console.log(newVal)
                    this.setOther(newVal)
                },
                deep: true,
                immediate: false,
            },
        },
        created() {
            this.memuList2 = this.$store.state.permission.topbarRouters
            let flag = this.$store.state.user.sys_flag
            if (flag !== 0) {
                this.setLeftRouter(flag)
            } else {
                this.setLeftRouter(1)
            }
        },
        methods: {

            childParams(){

            },

            setLeftRouter(item) {
                let flags = JSON.parse(JSON.stringify(this.memuList2))
                for (let i = 0; i < flags.length; i++) {
                    if (flags[i].sys !== undefined) {
                        if (flags[i].sys === '*') {
                        } else if (flags[i].sys === item) {
                        } else {
                            flags.splice(i, 1)
                        }
                    }
                }
                this.memuList = flags
            },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath)
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath)
            },

            setOther(item) {
                console.log(item)
                let flags = JSON.parse(JSON.stringify(this.memuList2))
                for (let i = 0; i < flags.length; i++) {
                    if (flags[i].sys !== undefined) {
                        if (flags[i].sys === '*') {
                        } else if (flags[i].sys === item) {
                        } else {
                            flags.splice(i, 1)
                        }
                    }
                }
                console.log(this.memuList)
                this.memuList = flags
                // setTimeout(() => {
                //     this.$router.go(0);
                // }, 500)
            }

        },
    }
</script>

<style lang="scss" scoped>
</style>
